<template>
	<!-- 头部 -->
	<div class="heared_container">
		<div class="heared">
			<img class="liC" @click="idxHandle('home', '/home')" src="https://rs.dance365.com/logo@3xrenew3.png" alt="" />
			<div class="ulC">
				<div class="liC" @click="idxHandle('home', '/home')">资源</div>
				<div class="liC" @click="idxHandle('course', '/course')">
					课程
				</div>
				<div class="liC">
					<router-link to="/room/myroom">练习室</router-link>
				</div>
				<div class="liC">
					<router-link to="" @click="handleno">交流</router-link>
				</div>
				<div class="liC">
					<router-link to="/my">我的</router-link>
				</div>
			</div>

			<div class="heared_right">
				<span @click="handleno" class="download"><svg t="1666072008629" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="9661" width="200" height="200">
						<path
							d="M735.968 800L288 800.256V672h447.968v128zM288 223.744L288.032 224 736 223.744 735.968 608H288V223.744zM735.968 160H288.032A63.968 63.968 0 0 0 224 223.744v576.512C224 835.392 252.704 864 288.032 864h447.936A63.968 63.968 0 0 0 800 800.256V223.744A63.968 63.968 0 0 0 735.968 160z"
							p-id="9662"></path>
						<path d="M480 768h64a32 32 0 0 0 0-64h-64a32 32 0 0 0 0 64" p-id="9663"></path>
					</svg >下载APP</span>
				<button @click="handleno"><span>+发布</span></button>
				<span @click="handlelogin" class="loginbtn" v-if="isShow != 'yes'">登录</span><img
					@mouseover="handleenter" @mouseleave="handleleave" 
					src="../../../src/assets/images/2.jpg" class="profile" v-if="isShow == 'yes'" />
				<p class="handle" style="display: none" ref="hover" @mouseover="handleenter" @mouseleave="handleleave" @click="handlecenterorloginout">
					<span  data-flag="center">个人中心</span>
					<hr><span  data-flag="loginout">退出登录</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted} from "vue"
import { useRouter } from "vue-router"
import { ElMessageBox, ElMessage } from "element-plus"
import QR from "qrcode"
import { reqHomeBannerApi } from "../../api/lxcApi/index"

const rou = useRouter()

const idxHandle = (id: any, url: any) => {
	if (url == "/home") {
		rou.push(url)
	} else if (url == "/course") {
		rou.replace(url)
	} else if (url == "/lianxi") {
		rou.push(url)
	}
}
const handlelogin = () => {
	ElMessageBox.alert(
		"<div><div style='width:300px;height:300px;margin:0 auto;margin-bottom:10px;'><canvas id='canvasEl' style='margin-left:84px;margin-top:84px;width:200px;height:200px'></canvas></div><div style='width:100%;text-align:center;'>打开“中舞网APP”，扫描二维码登录</div><div style='width:100%;text-align:center;'>如未安装APP,扫描此二维码同样可以下载“中舞网APP”</div></div>",
		"扫码登录",
		{
			dangerouslyUseHTMLString: true,
			center: false,
			showConfirmButton: false,
			closeOnClickModal: true,
			closeOnHashChange: true,
			beforeClose(a, b, c) {
				console.log("要取消")
				clearTimeout(mockquery)
				localStorage.setItem("isLogin", "no")
				ElMessage({
					message: "登录失败",
					duration: 2000,
					type: "error",
				})
				c()
			},
		}
	)
	let mockquery: any
	setTimeout(() => {
		let canvasEl = document.getElementById("canvasEl")
		QR.toCanvas(canvasEl, "http://www.baidu.com", function (err: any) {
			mockquery = setTimeout(() => {
				clearInterval(pollquery)
				localStorage.setItem("isLogin", "yes")
				ElMessage({
					message: "登录成功",
					duration: 2000,
					type: "success",
				})
				window.location.href = "/"
			}, 3000)
		})
	})
	let pollquery = setInterval(() => {
		reqHomeBannerApi()
	}, 1000)
}
//扫码登录的逻辑，点击弹出携带生成时间和标识符的二维码，同时开启对登录结果的间隔查询
//查询到已登录的结果之后，给本地存储设置一系列用户信息和标识
//并且打开路由守卫的不可跳转权限，跳转到点击弹出二维码时想要去的页面

let isShow = ref("no")
let hover = ref()

const handleLoginout = () => {
	localStorage.setItem("isLogin", "no")
	isShow.value = "no"
	window.location.href = "/"
}

const handleenter = (event) => {
	hover.value.style.display = "block"
	event.target.style.display = 'block'
}
const handleleave = (event) => {
	hover.value.style.display = "none"
}
const handlecenterorloginout = (event) => {
	console.log(event.target.dataset.flag)
	let flag = event.target.dataset.flag
	//点击判断data属性然后做相应的逻辑
	if(flag == 'center'){
		rou.push('/center')
	}
	if(flag == "loginout"){
		localStorage.setItem('isLogin','')
		window.location.href = '/'
	}
}

const handleno = () => {
	ElMessage({
    message: '您没有权限访问！',
    type: 'warning',
	duration:500
  })
}

onMounted(() => {
	isShow.value = localStorage.getItem("isLogin") as string
})
</script>

<style scoped>
.active {
	color: #f93684;
}

.heared_container {
	width: 100%;
	box-shadow: 10px 0 9px #a3a3a3;
	background: #fff;
}

.heared {
	margin: 0 auto;
	width: 1200px;
	height: 60px;
	display: flex;
	justify-content: space-between;
}

.heared a:hover {
	color: #f93684;
}

.heared img {
	width: 128px;
	height: 30px;
	margin: 15px 20px;
}

.heared .ulC {
	display: flex;
	width: 510px;
	margin-left: -300px;
}

.heared .ulC .liC {
	flex: 1;
	font-size: 18px;
	text-align: center;
	line-height: 60px;
	cursor: pointer;
}

.heared_right {
	width: 250px;
	line-height: 60px;
	display: flex;
	justify-content: space-between;
	margin-right: 10px;
	position: relative;
}

.heared_right button {
	width: 75px;
	height: 30px;
	margin-top: 15px;
	border: 1px solid #f93684;
	border-radius: 20px;
	background: #f93684;
	color: #fff;
}

.heared_right span svg {
	width: 30px;
	height: 30px;
	vertical-align: middle;
}

.loginbtn {
	cursor: pointer;
}

.profile {
	display: inline-block !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	margin: 10px 0 0 0 !important;
}

.handle {
	width: 200px;
	height: 100px;
	background-color: #ccc;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	position: absolute;
	top: 50px;
	right: -10px;
	border-top: 10px solid white  ;
	z-index: 11;
}
.download{
	cursor: pointer;
}
</style>
